<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body>
    <div id="app">
        <el-input v-model="chapter" placeholder="输入章节"></el-input>
        <el-input v-model="count" placeholder="输入图片数量"></el-input>
        <button @click="uploadImage">调用</button>
    </div>
    <!-- import Vue before Element -->
    <script src="./vue.js"></script>
    <!-- import JavaScript -->
    <script src="https://unpkg.com/element-ui/lib/index.js"></script>
    <!-- import axios -->
    <script src="https://unpkg.com/axios/dist/axios.min.js"></script>
    <script>
        new Vue({
            el: "#app",
            data: function () {
                return {
                    chapter: 0,
                    count: 0,
                };
            },
            methods: {
                // 1. 
                uploadImage() {
                    for (let i = 1; i <= this.count; i++) {
                        let element = `https://liushuaiyang.oss-cn-shanghai.aliyuncs.com/nest-docs/image/第${this.chapter}章-${i}.png`;
                        window.open(element)
                        // console.log(element);
                    }
                },

                // 请求接口
                getFile() {
                    let url = `http://localhost:3000/dog`;
                    let that = this;
                    let params = {
                        "name": "展示",
                        "age": 12,
                        "breed": "泰迪"
                    }
                    axios
                        .post(url, params)
                        .then(function (res) {
                            if (res.status === 201) {
                                that.imageUrl = res.data.content.download_url;
                                that.$message.success("上传成功");
                            } else {
                                that.$message.error(res.statusText || "上传失败");
                            }
                        })
                        .catch(function (err) {
                            that.$message.error(err.statusText || "上传失败");
                        });
                }
            },
        })
    </script>
</body>

</html>